<template>
	<view v-show="!boxHide">
		<!-- 基本信息 -->
		<view class="base_item_view">
			<view class="info_item">
				<view class="label">拜访主题</view>
				<view class="text">{{visitBaseNews.title}}</view>
			</view>
			<view class="info_item">
				<view class="label">拜访类型</view>
				<view class="text">{{visitBaseNews.type}}</view>
			</view>
			<view class="info_item">
				<view class="label">预约下次拜访时间</view>
				<view class="text">{{visitBaseNews.appointment_date}}</view>
			</view>
			<view class="info_item">
				<view class="label">拜访内容</view>
				<view class="text">{{visitBaseNews.content}}</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="reply_list">
			<template v-for="(item,index) in replyList">
				<view class="reply_list_row" :key="index">
					<view class="head_view">
						<image :src="item.avatar"></image>
					</view>
					<view class="content_view">
						<view class="name">{{item.username}}</view>
						<view class="timeAndBtn">
							<text class="time">{{item.create_at}}</text>
							<!-- <view class="replyBtn" @click.stop='openReply'>回复</view> -->
						</view>
						<view class="content">
							{{item.content}}
						</view>
						<!-- <view class="replys">
							<template v-for="(item2,index2) in item.replys">
								<view class="replys_row" :key="index2">
									<text class="name">{{item2.name}}：</text>
									<text>{{item2.content}}</text>
								</view>
							</template>
						</view> -->
					</view>
				</view>
			</template>
		</view>
		<!-- 发表 -->
		<!-- <view class="publish">
			<input class="publishInput" type="text" v-model="publishContent" placeholder="说点什么吧" placeholder-style="color:#BBB;" />
			<button class="publishBtn">发表</button>
		</view> -->
		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				boxHide:true,
				loading:true,
				replyContent:"",
				publishContent:"",
				visitBaseNews:{
					title:"",
					type:"",
					appointment_date:"",
					content:""
				},
				replyList:[]
			}
		},
		onLoad(options) {
			this.visitId=options.id;
			this.getBaseData(1);
		},
		onReachBottom() {
			if(this.loading)
				this.getReplyData(3);
		},
		methods: {
			// 获取基础信息
			getBaseData(type){
				this.$refs.load.initLoading({loadType:type}).then(res=>{
					this.boxHide=false;
					this.$api.addClientVisit({id:this.visitId},0).then(res2=>{
						this.visitBaseNews=res2;
						this.$refs.load.getLoadingData({});
						this.getReplyData(2);
					})
				})
			},
			// 获取回复列表的数据
			getReplyData(type){
				this.$refs.load.initLoading({loadType:type,loadPrompt:true}).then(res=>{
					if(type!=3){
						this.replyList=[];
						this.reqPage=1;
					}
					let upJson={visit_id:this.visitId,page:this.reqPage,rows:10};
					this.$api.addClientVisit(upJson,6).then(res2=>{
						this.$refs.load.getLoadingData({oldData:this.replyList,newData:res2.data}).then(res3=>{
							this.replyList=res3.list;
							this.loading=res3.loading;
							this.reqPage++;
						});
					})
				})
			},
		}
	}
</script>

<style>
	.textArea {
		background-color: #ccc;
		border-radius: 6rpx;
		height: 260rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.base_item_view {
		background: #fff;
		padding: 14rpx 0;
	}
	.base_item_view .info_item{
		display: flex;
		padding: 14rpx 30rpx;
		color: #333;
		font-size: 28rpx;
	}
	.base_item_view .info_item .label {
		color: #9BA7B7;
		padding-right: 20rpx;
	}
	.base_item_view .info_item .text {
		flex: 1;
	}
	.reply_list {
		background: #fff;
		margin-top: 30rpx;
	}
	.reply_list .reply_list_row {
		padding: 30rpx;
		display: flex;
		font-size: 28rpx;
		color: #333;
	}
	.reply_list_row .head_view {
		padding-right: 30rpx;
	}
	.reply_list_row .head_view image{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.content_view .name{
		color: #666;
	}
	.content_view .timeAndBtn {
		display: flex;
		justify-content: space-between;
		margin-top: 6rpx;
	}
	.content_view .timeAndBtn .time{
		color: #9BA7B7;
		font-size: 26rpx;
	}
	/* .content_view .timeAndBtn .replyBtn{
		color: #049BFF;
	} */
	.content_view .content {
		margin: 18rpx 0;
	}
	.content_view .replys {
		background: #F8F8F8;
		padding: 30rpx 20rpx;
	}
	.content_view .replys .replys_row{
		margin-bottom: 10rpx;
	}
	.content_view .replys .replys_row .name{
		color: #9BA7B7;
	}
	
	.publish {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		height: 110rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 14rpx 30rpx;
		box-sizing: border-box;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		background-color: #fff;
	}
	.publishInput {
		background-color: #F8F8F8;
		height: 100%;
		border-radius: 45rpx;
		flex: 1;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
	}
	.publishBtn {
		margin-left: 20rpx;
		height: 76rpx;
		line-height: 76rpx;
		width: 160rpx;
		background-color: #96D5FF;
		color: #fff;
		border-radius: 38rpx;
		font-size: 30rpx;
	}
	.publishBtn::after{ border: none;}
</style>
